<template>
    <div class="edit">
      <div class="box">
        <!-- 学生用户信息 -->
        <div class="table">
          <div class="tr">
            <div class="td" style="width:120px">姓名：</div>   <div class="td" style="width:200px">{{report.ptName}}</div>
            <div class="td" style="width:120px">性别：</div>   <div class="td" style="width:120px">{{report.ptSex}}</div>
            <div class="td" style="width:120px">报告Id：</div>  <div class="td" style="width:150px">{{report.reportId }}</div>
            <div class="td" style="width:120px">检查号：</div>  <div class="td" style="flex:1">{{report.ptdtCheckCode }}</div>
          </div>

          <div class="tr">
             <div class="td" style="width:120px">报告医生：</div>  <div class="td" style="width:200px">{{report.ptdtBgDoctor}}</div>
              <div class="td" style="width:120px">患者Id：</div>   <div class="td" style="width:120px">{{report.ptdtPatientId}}</div>
             <div class="td" style="width:120px">患者信息Id：</div>  <div class="td"  style="width:150px">{{report.ptdeId}}</div>
            <div class="td" style="width:120px">检查类型： </div> <div class="td" style="flex:1">{{report.ptdtCheckMachine}}</div> 

          </div> 

          <div class="tr">
            <div class="td" style="width:120px">检查名称：</div>  <div class="td" style="width:320px">{{report.ptdtCheckName}}</div>
            <div class="td" style="width:240px">检查时间：</div>  <div class="td" style="flex:1">{{report.ptdtCheckDate}}</div>

          </div>

          <div class="tr">
          </div>

          <div class="tr"> 
          </div>
        </div>
        <!-- 学生报告填写 -->
    
        <div class="studenEdit clf">

          <div class="studenReport">
            <div class="tabs">
              <el-tabs type="border-card">
                <el-tab-pane label="简要病史">
                    <div class="bingshi">
                        <el-input type="textarea" :rows="12" placeholder="请输入简要病史" v-model="report.jcProReadyTxt">
                        </el-input>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="检查技术">
                  <div class="jishu">
                      <el-input type="textarea"   :rows="12" placeholder="请输入检查技术" v-model="report.jcReadyTxt">
                      </el-input>
                    </div>
                </el-tab-pane>
              </el-tabs>
            </div>

            <!-- 检查所见 -->
            <div class="jcSjTxt">
              <div class="title">检查所见</div>
              <div class="content clf">
                <el-input type="textarea"  :rows="12" placeholder="请输入内容" v-model="report.jcSjTxt">
                </el-input>
              </div>
            </div>

            <!-- 检查意见 -->
            <div class="jcYjTxt">
              <div class="title">检查意见</div>
              <div class="content clf">
                <el-input type="textarea"  :rows="12" placeholder="请输入内容" v-model="report.jcYjTxt">
                </el-input>
              </div>
            </div>

            <div class="btnBox clf">
              <el-button  @click="isTree = isTree == true ? false : true" class="btn" >{{isTree2}}</el-button>

              <el-button  v-if="btnStatus == '未完成' ? true : false" class="sub" @click="submitReport">提交报告</el-button>
              <el-button type="info" v-if="btnStatus != '未完成' ?  true : false"  class="sub2" >提交报告</el-button>
            
              <el-button  v-if="btnStatus == '未完成' ? true : false"  :plain="true"  @click="saveTemp" class="btn" >暂时保存</el-button>
              <el-button type="info"  v-if="btnStatus != '未完成' ? true : false" disabled  class="btn2" >暂时保存</el-button>

            </div>
          </div>
        

        <!-- 患者信息 -->
          <div class="patientRepoty" >

            <el-tabs type="border-card">
                  <el-tab-pane label="患者信息">
                     <div class="pRbox">
                      <div class="pRtitle" style="border-bottom: 1px solid #EBEEF5; font-size:16px; color: black;">患者病史</div>
                        <div class="pRcontent" v-for="(item,index) in survey" :key="index">
                          <div style="line-height: 30px;">时间:{{item.ptdtCheckDate}}</div>
                          <div style="line-height: 25px; margin-top: 10px;">内容:{{item.ptdtBgreadyTxt || "无"}}</div>
                        </div>
                      </div>

                      <div class="pRbox">
                        <div class="pRtitle" style="border-bottom: 1px solid #EBEEF5; font-size:16px; color: black;">患者检查所见</div>

                        <div class="pRcontent" v-for="(item,index) in checkSee" :key="index">
                          <div style="line-height: 30px;">时间:{{item.ptdtCheckDate}}</div>
                          <div style="line-height: 25px; margin-top: 10px;">内容:{{item.ptdtBgreadyTxt || "无"}}</div>
                        </div>
                      </div>


                      <div class="pRbox">
                        <div class="pRtitle" style="border-bottom: 1px solid #EBEEF5; font-size:16px">患者检查意见</div>
                        <div class="pRcontent" v-for="(item,index) in checkOpinion" :key="index">
                          <div style="line-height: 30px;">时间:{{item.ptdtCheckDate}}</div>
                          <div style="line-height: 25px; margin-top: 10px;">内容:{{item.ptdtBgreadyTxt || "无"}}</div>
                        </div>
                      </div>
                  </el-tab-pane>
                  <el-tab-pane label="截图">截图</el-tab-pane>
                   <el-tab-pane label="序列">序列</el-tab-pane>
                   <el-tab-pane label="模板">序列</el-tab-pane>
            </el-tabs>
             
          </div>
        </div>

      </div>

      <!-- 查看模板 -->
      <transition-group name="lyric">
          <div class="template" v-if="isTree" :key="1">
                <div class="tree">
                  <el-input placeholder="输入关键字进行过滤" v-model="filterText">
                  </el-input>

                  <el-tree 
                    class="filter-tree"
                    :data="treeData"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    :default-expand-all="false"
                     @node-click="handleNodeClick"
                    ref="tree">
                  </el-tree>
                </div>

                <el-tabs type="border-card" style="margin-top:30px">
                  <el-tab-pane label="检查所见">{{temData == "" ? "无" : temData.libCheckSj }}</el-tab-pane>
                  <el-tab-pane label="检查意见">{{temData == "" ? "无" : temData.libCheckYj }}</el-tab-pane>
                </el-tabs>
          </div>
          
      </transition-group>
    </div>
</template>

<script>
import { studentReportInfo, getSaveEdit , getUpdateEdit ,getSurvey, getCheckSee, getCheckOpinion, templateData, templateInfo} from '@/api/report'

export default {
  data(){
    return{
      report:[],          //学生详情
      studentText:{       //学生
        reportId:"",      //报告ID
      },
      btnStatus:"",        //老师是否批改的状态

      survey:null,          //患者病史
      checkSee:null,        //患者所见请求
      checkOpinion:null,    //患者意见请求




      isTree: false,       //模板显示隐藏
      filterText: '',
      treeData: [],       //树形数据
      defaultProps: {    
        children: 'children',
        label: 'label'
      },
      temData:"",                    //模板数据
    }
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
  created(){
    // console.log(this.$route.query);                      //传过来的参数
    this.studentText.reportId = this.$route.query.reportId; //报告id
    this.btnStatus = this.$route.query.status;              // 老师批改状态
    this.getStudentReportInfo(this.studentText.reportId);   //初始渲染数据
        
    getSurvey(this.studentText.reportId).then(res =>{       // 患者病史
      if(res.code == 200){
        this.survey = res.data;
      }
    });
    getCheckSee(this.studentText.reportId).then(res =>{       //患者所见请求  
        this.checkSee = res.data;
    });  

    getCheckOpinion(this.studentText.reportId).then(res =>{    // 患者意见请求 
      if(res.code == 200){
        this.checkOpinion = res.data;
      }
    })

    templateData().then(res=>{
      if(res.code == 200){
        console.log(res.data.public);
        this.treeData = res.data.public;
      }
    })
  },
  methods:{
    async getStudentReportInfo(reportId){  //初始渲染数据
      let data = await studentReportInfo(reportId);
      this.report = data.data;
    },


    saveTemp(){  //暂时保存
      this.studentText.jcProReadyTxt = this.report.jcProReadyTxt;
      this.studentText.jcReadyTxt = this.report.jcReadyTxt;
      this.studentText.jcSjTxt = this.report.jcSjTxt;
      this.studentText.jcYjTxt = this.report.jcYjTxt;

        getSaveEdit(this.studentText).then(res=>{
          if(res.code == 200){
            this.$message({
                type: 'success',
                message: '暂时保存成功！'
            });
          }
        })
      },

    async subReportData(options){      //提交报告接口
    getUpdateEdit(options).then(res =>{
        if(res.code == 200){
          this.$message({
              type: 'success',
              message: '提交报告成功！'
          });
        console.log(res);
      }
       
    })
     
    },


     submitReport() { //点击---提交报告 
        this.$confirm('是否提交报告?提交之后不可再修改', '提交报告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.subReportData(this.studentText);
          this.$router.push({ path: '/report/report' })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消提交报告！'
          });          
        });
    },


     filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      // 点击节点
      handleNodeClick(data){
        let { id,pid } = data;
        templateInfo(id,pid).then(res=>{
          if(res.code == 200){
            this.temData = res.data;
            console.log( this.temData);
          }
        })
      }
  },
  computed:{
    isTree2(){
      if(this.isTree){
        return "关闭模板"
      }else{
        return "查看模板"
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .edit{
    .box{
      width: 1200px;
      overflow: hidden;
      margin: 0 auto;
      padding: 20px;
    }
    .table {
      margin: 0 auto;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       width: 100%;
      .tr{
        display: flex;
      }
      .td {
        box-sizing: border-box;
        padding: 15px 0px;
        background-color: #ffffff;
        border: 1px solid #ebeef5;
        display: inline-block;
        text-align: center;
      }
      .td:nth-child(odd){
        background-color: #f5f7fa;
      }
    }
     
    .tabs{
      width: 550px;
      box-sizing: border-box;
      // 鼠标点击tabs样式
      ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
          color: black;
          font-weight: bold;
      }
       // 鼠标放上去tabs样式
      ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
          color: black;
          font-weight: bold;
      }
    }
    ::v-deep .el-tabs__content{
      .el-tab-pane , .bingshi, .jishu{
            width: 100%;
            height: 100%;
      }
    }
    .el-textarea{
      width: 100%;
      ::v-deep textarea{
        width: 100%;
      }
    }
  }
.studenEdit{
  margin-top: 30px;

  .jcSjTxt , .jcYjTxt{
    width: 550px;
    margin: 20px  auto 0 auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    box-sizing: border-box;
    .title{
      border-bottom: 1px solid rgba(0, 0, 0, .1);
      border-top: 1px solid rgba(0, 0, 0, .1);
      padding: 15px;
      box-sizing: border-box;
    }
    .content{
      box-sizing: border-box;
      padding: 15px;
    }
    
  }
  .sub , .sub2 , .btn , .btn2{
      float: right;
      color: white;
      margin-right: 30px;
  }
  .sub, .btn{
    background-color:#56a9ff;
  }
  .sub2 , .btn2{
    background-color:#c8c9cc;
  }
}
  .clf::after{
    content: "";
    display: block;
    clear: both;
  }

.btnBox{
  width: 100%;
  margin: 20px 0;
}
::v-deep .el-textarea__inner{
  word-wrap:break-word 
}
.record{
  display: flex;
}

.studenReport, .patientRepoty ,.box-card{
  
  width: 550px;
}
.studenReport{
  float: left;
}
.patientRepoty{
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  float: right;
  box-sizing: border-box;

    .pRbox{
      margin-bottom: 40px;
      border-bottom: 1px solid rgba(0, 0, 0, .1);
      border-top: 1px solid rgba(0, 0, 0, .1);
    .pRtitle, .pRcontent{
      padding:15px 20px;
    }
  }

}
 .text {
    font-size: 14px;
    
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

// 模板
.template{
  position: fixed;
  right: 0;
  width: 650px;
  background-color: white;
  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 14%);
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
}

.lyric-enter,
  .lyric-leave-to {
  opacity: 0;
  transform: translateX(650px);
  }
  .lyric-enter-to,
  .lyric-leave {
    opacity: 1;
  }
  .lyric-enter-active,
  .lyric-leave-active {
    transition: all 0.5s;
  }


</style>